<template>
  <view class="collect_List">
   <!-- <scroll-view scroll-y @scrolltolower="scrollTolower" class="scroll"> -->
    <view class="collect_List_container" v-for="item in collectSongList" :key="item.id" @click="navSongsListDetail(item.id)">
      <image :src="item.coverImgUrl" mode=""></image>
      <view class="text">
        <text>{{ item.name }}</text>
        <text style="color: #878787; margin: 15rpx 0;">
          {{ item.trackCount + '首 ,' + ' by' + item.creator.nickname + ', ' + ' 播放' + (item.playCount / 10000).toFixed(1) + '万次' }}
        </text>
      </view>
    </view>
    <u-loadmore :status="status" icon-type />
    <!-- </scroll-view> -->
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      collectSongList: []
    }
  },
  onLoad() {
    if (this.cookie) {
      if (this.userInfo.nickname) {
        this.getCollectSongList(this.userInfo.userId)
      } else {
        this.getCollectSongList(this.orUserinfo.userId)
      }
    }
  },
  computed: {
    ...mapState('login', ['cookie', 'userInfo', 'orUserinfo'])
  },
  methods: {
    async getCollectSongList(id) {
      const { data: res } = await uni.$http.get('user/playlist', { uid: id })
       if (res.code !== 200) return uni.$showMsg('收藏列表获取失败')
      // console.log(res)
      this.collectSongList=res.playlist
    },
    navSongsListDetail(id){
     uni.navigateTo({
       url:'/subpkg/songs_list_detail/songs_list_detail?id='+id
     })
    }
  }
}
</script>

<style lang="scss" scoped>
  .collect_List {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
  }
   // .scroll {
   //    height:100vh;
   //  }
  .collect_List_container {
    display: flex;
    margin-top: 30rpx;
    align-items: center;
  }
  .collect_List_container image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin-left: 30rpx;
  }
  .collect_List_container .text {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
  }
</style>
